<template>
  <a-form
      layout="vertical"
      :model="activeData.props"
      name="basic"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
  >
    <a-form-item
        label="标题"
        name="title"
        :rules="[{ required: true, message: '请输入标题' }]"
    >
      <a-input v-model:value="activeData.props.title" :disabled="activeData.isLocked"/>
    </a-form-item>
    <a-form-item
        label="选项"
        name="options"
    >
      <a-space direction="vertical">
        <template v-for="(item,index) in activeData.props.options" :key="index">
          <a-space direction="vertical">
            <div class="flex items-center justify-center">
              <a-form-item-rest>
                <a-input v-model:value="item.text" :disabled="activeData.isLocked"/>
              </a-form-item-rest>
              <MinusCircleOutlined
                  v-if="activeData.props.options.length > 2&&index>=2"
                  class="dynamic-delete-button ml-[5px]"
                  @click="removeDomain(item)"
              />
            </div>
          </a-space>
        </template>
      </a-space>
    </a-form-item>
    <a-form-item>
      <a-button type="link" class="w-full" :disabled="activeData.isLocked" @click="addDomain">
        <PlusOutlined/>
        添加选项
      </a-button>
    </a-form-item>
    <a-form-item
        label="默认选中"
        name="select"
    >
      <a-select
          ref="select"
          :disabled="activeData.isLocked"
          v-model:value="activeData.props.value"
          class="text-left"
          @change="handleChange"
      >
        <a-select-option :value="item.value" v-for="(item,index) in activeData.props.options" :key="index">
          {{ item.text }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item
        name="isVertical"
    >
      <a-checkbox :disabled="activeData.isLocked" v-model:checked="activeData.props.isVertical">竖向排列</a-checkbox>
    </a-form-item>
  </a-form>
</template>

<script setup>
import {MinusCircleOutlined, PlusOutlined} from '@ant-design/icons-vue';
import useQuestion from "../../hooks/useQuestion.js";

const {activeData} = useQuestion()
const addDomain = () => {
  activeData.value.props.options.push({
    value: 'item' + (activeData.value.props.options.length + 1),
    text: '选项',
  });
};
const handleChange = (value) => {
  console.log(`selected ${value}`);
};
const onFinish = (values) => {
  console.log('Success:', values);
};

const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo);
};
const removeDomain = (item) => {
  const index = activeData.value.props.options.indexOf(item);
  if (index !== -1) {
    if (activeData.value.props.options[index].value === activeData.value.props.value) {
      activeData.value.props.value = ''
    }
    activeData.value.props.options.splice(index, 1);
  }
};
</script>

<style scoped>
:deep(.ant-form-item-control-input-content), :deep(.ant-space-item) {
  display: flex;
  justify-content: flex-start;
}
</style>
